<template>
	<div class="table-box">
		<HTable :tableData="crudData" />
	</div>
</template>

<script setup lang="jsx">
import { ref } from 'vue';
import HTable from '@/components/HTable/index.vue';
const crudData = ref({
	clums: [
		// {
		//     type:"selection",
		//     width: 100,
		//     fixed: "left",
		//     align: "center",
		// },
		{
			type: 'index',
			props: 'index',
			label: '序号',
			width: 100,
			fixed: 'left',
			align: 'center'
		},
		{
			props: 'title',
			label: '标题',
			align: 'center',
			search: {
				key: 'titleSelf',
				type: 'input',
				placeholder: '请输入标题',
				width: '200px',
				clearable: true,
				maxLength: 20
			}
		},
		{
			props: 'content',
			label: '内容',
			align: 'center'
		},
		{
			props: 'username',
			label: '用户名',
			align: 'center'
		},
		{
			props: 'mobel',
			label: '手机',
			align: 'center'
		},
		{
			props: 'addTime',
			label: '添加日期',
			align: 'center',
			// search: {
			// 	type: "datetime",
			// 	placeholder: "请选择日期",
			// 	width: "200px",
			// 	clearable: true,
			// 	maxLength: 20,
			// },
			search: {
				type: 'timerange',
				placeholder: '请选择日期',
				clearable: true,
				maxLength: 20,
				timeFormatter: 'YYYY-MM-DD HH:mm:ss'
			}
		},
		{
			props: 'status',
			label: '状态',
			align: 'center',
			render: (scope) => {
				return <span style={{ color: 'red' }}>{scope.row.status == '1' ? '正常' : '异常'}</span>;
			},
			search: {
				type: 'select',
				clearable: true,
				placeholder: '请选择状态',
				width: '200px',
				optionList: [
					{
						label: '正常',
						value: 1
					},
					{
						label: '异常',
						value: 0
					}
				]
			}
		},
		{
			props: 'caozuo',
			label: '操作',
			width: 175,
			fixed: 'right',
			align: 'center',
			render: (scope) => {
				return (
					<>
						<el-button
							link
							type="primary"
							onClick={() => {
								crudData.value.form.handelFormShow('修改数据', true);
								console.log('修改', scope);
							}}
						>
							修改
						</el-button>
						<el-button
							link
							type="primary"
							onClick={() => {
								console.log('删除', scope);
							}}
						>
							删除
						</el-button>
					</>
				);
			}
		}
	],
	data: [
		{
			id: '1',
			title: '标题1',
			content: '内容1',
			username: '用户1',
			mobel: '12345678901',
			sex: 'male',
			addTime: '2023.06.23',
			status: 1
		},
		{
			id: '2',
			title: '标题2',
			content: '内容2',
			username: '用户2',
			mobel: '12345678902',
			sex: 'male',
			addTime: '2023.06.23',
			status: 1
		},
		{
			id: '3',
			title: '标题3',
			content: '内容3',
			username: '用户3',
			mobel: '12345678901',
			sex: 'male',
			addTime: '2023.06.23',
			status: 0
		},
		{
			id: '4',
			title: '标题4',
			content: '内容4',
			username: '用户4',
			mobel: '12345678902',
			sex: 'male',
			addTime: '2023.06.23',
			status: 0
		},
		{
			id: '5',
			title: '标题5',
			content: '内容5',
			username: '用户5',
			mobel: '12345678901',
			sex: 'male',
			addTime: '2023.06.23',
			status: 1
		},
		{
			id: '6',
			title: '标题6',
			content: '内容6',
			username: '用户6',
			mobel: '12345678902',
			sex: 'male',
			addTime: '2023.06.23',
			status: 1
		},
		{
			id: '7',
			title: '标题7',
			content: '内容7',
			username: '用户7',
			mobel: '12345678901',
			sex: 'male',
			addTime: '2023.06.23',
			status: 1
		},
		{
			id: '8',
			title: '标题8',
			content: '内容8',
			username: '用户8',
			mobel: '12345678902',
			sex: 'male',
			addTime: '2023.06.23',
			status: 1
		}
	],
	pager: {
		total: 32,
		pageIndex: 1,
		pageSize: 10,
		pagerLang: [10, 20, 50, 100],
		sizeChange: (e) => {
			console.log('sizeChange', e);
		},
		pageIndexChange: (e) => {
			console.log('pageChange', e);
		}
	},
	form: {
		formName: '',
		formShow: false,
		btnAlign: 'center',
		formList: [
			{
				key: 'titleSelf',
				type: 'input',
				label: '标题名称',
				placeholder: '请输入标题',
				// width: "200px",
				maxLength: 20,
				value: '测试标题填充',
				validate: [
					{
						required: true,
						message: '请输入标题ss',
						trigger: 'blur'
					}
				]
			},
			{
				key: 'status',
				type: 'select',
				label: '发布状态',
				placeholder: '请选择状态',
				// width: "200px",
				validate: [
					{
						required: true,
						message: '请选择状态',
						trigger: 'change'
					}
				],
				optionList: [
					{
						label: '正常',
						value: 1
					},
					{
						label: '异常',
						value: 0
					}
				]
			},
			{
				key: 'addTime',
				type: 'datetime',
				label: '发布日期',
				placeholder: '请选择发布日期',
				validate: [
					{
						required: true,
						message: '请选择发布日期',
						trigger: 'change'
					}
				]
			}
		],
		handelFormShow: (name, flag) => {
			crudData.value.form.formName = name;
			crudData.value.form.formShow = flag;
		},
		handelSubmit: (data) => {
			console.log('submitData', data);
			//此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
			crudData.value.form.formShow = false;
		}
	},
	handleBtns: [
		{
			text: '新增',
			type: 'primary',
			onClick: () => {
				crudData.value.form.handelFormShow('新增数据', true);
			}
		},
		{
			text: '批量删除',
			type: 'danger',
			onClick: () => {
				console.log('批量删除');
			}
		}
	],
	//查询参数回调
	searchCb: (e) => {
		console.log('查询参数', e);
		crudData.value.data = crudData.value.data.slice(0, 5);
		crudData.value.pager.pageIndex = 1;
		crudData.value.pager.total = 5;
	}
});
</script>

<style lang="scss" scoped>
.table-box {
}
</style>
